<template>
  <continer :isNoTabs="true" :shadow="false" style="padding: 0px 2px">
    <template slot="search">
      <QuickSearch :advForm="quickSearchForm" @QuickSearch="handleSearchFunc"></QuickSearch>
    </template>
    <template slot="oprate">
      <el-button type="primary" size="mini" @click="getData">刷新</el-button>
    </template>
    <template slot="content">
      <configTable
        ref="table"
        :headers="tableHeaders"
        :data="noticeTableData"
        :pagingData="pagingData"
        @pageChange="handleCurrentChange"
        @pageSizeChange="handleSizeChange"
        @checkHeadersChange="checkHeadersChange"
        :batchs="batchs"
        :selection="true"
        @batchClick="batchClick"
        :showIsAllCheckBox="false"
      >
        <template slot="column">
          <template v-for="(item, index) in checkHeaders">
            <u-table-column
              v-if="item.prop !== 'isDeblack' && item.prop !== 'oprate'"
              :key="index"
              :label="item.label"
              :prop="item.prop"
              :resizable="false"
              :sortable="item.sortable"
              :show-overflow-tooltip="true"
            >
            </u-table-column>
            <u-table-column
              v-if="item.prop === 'isDeblack'"
              :key="index"
              :label="item.label"
              :width="80"
            >
              <template slot-scope="scope">
                <i class="V7_iconfont V7_iconV7tubiao_dian" :class="scope.row.block ? 'enable-span':'disable-span'"></i>
                <span v-if="!scope.row.block">封禁</span>
                <span v-else>正常</span>
              </template>
            </u-table-column>
            <u-table-column
              v-if="item.show && item.prop === 'oprate'"
              :key="index"
              :label="item.label"
              :width="80"
              fixed="right"
            >
              <template slot-scope="scope">
                <span class="oprate-span" @click="handleEdit(scope.row)">详情</span>
              </template>
            </u-table-column>
          </template>
        </template>
      </configTable>
      <DetailDrawer ref="curDrawer" @getData="getData"></DetailDrawer>
    </template>
  </continer>
</template>

<script lang="ts">
/**
 * 访客黑名单组件
 */
import { Component, Vue, Ref } from 'vue-property-decorator'
import QuickSearch from '@/components/globalTool/search/index.vue'
import continer from '@/common/views/configCommon/ui-modules/handle-wrapper.vue'
import configTable from '@/components/configCommon/table.vue'
import { commonAction } from '@/utils/common'
import { CommonModule } from '@/store/modules/common'
import DetailDrawer from './detail.vue'
import { ipValidate } from '@/utils/validate'
@Component({
  name: 'Vistor',
  components: {
    QuickSearch,
    configTable,
    continer,
    DetailDrawer
  }
})
export default class Vistor extends Vue {
  [x: string]: any

  @Ref() private readonly curDrawer: any
  @Ref() private readonly table: any
  private noticeTableData: any = []
  private pagingData: any = { total: 0, limit: 10, page: 1 }
  private checkHeaders: [] = []
  private dSelect = [
    // { _id: 'ip', name: 'IP黑名单' },
    { _id: 'visitorId', name: '访客黑名单' }
  ]

  private eSelect = [
    { _id: true, name: '是' },
    { _id: false, name: '否' }
  ]

  private fSelect = [
    { _id: false, name: '封禁' },
    { _id: true, name: '正常' }
  ]

  private quickSearchForm: any = {
    form: {
      visitorName: '',
      userId: '',
      c: [],
      blackType: '',
      isApplyDeblack: '',
      isDeblack: '',
      ip: ['', '']
    },
    advSearchOptions: [
      { label: '快捷搜索', name: 'visitorName', inputType: 'input', clearable: true, placeholder: '请输入客户名称' },
      { label: '拉黑时间', name: 'c', inputType: 'dateTimeRange', clearable: true },
      { label: 'IP地址', name: 'ip', inputType: 'ip' },
      { label: '拉黑坐席', name: 'userId', inputType: 'select', clearable: true, selectData: this.AgentList, placeholder: '请选择' },
      { label: '拉黑类型', name: 'blackType', inputType: 'select', clearable: true, selectData: this.dSelect, placeholder: '请选择' },
      { label: '申请解封', name: 'isApplyDeblack', inputType: 'select', clearable: true, selectData: this.eSelect, placeholder: '请选择' },
      { label: '当前状态', name: 'isDeblack', inputType: 'select', clearable: true, selectData: this.fSelect, placeholder: '请选择' }
    ]
  }

  get AgentList () {
    return (CommonModule as any).publicCache.userList.map(v => ({ name: `${v.agentName} [${v.agentNumber}]`, _id: v._id }))
  }

  private async mounted () {
    this.getData()
  }

  private getAgentName (agentId) {
    const agent = (CommonModule as any).publicCache.userListObj[agentId]
    if (agent) {
      return agent.name
    }
    return ''
  }

  private async getData () {
    this.table.cancelSelectFun()
    const actionData: any = {
      limit: this.pagingData.limit,
      page: this.pagingData.page
    }
    if (this.quickSearchForm.form.visitorName !== '') {
      actionData.visitorName = this.quickSearchForm.form.visitorName
    }
    if (this.quickSearchForm.form.blackType !== '') {
      actionData.blackType = this.quickSearchForm.form.blackType
    }
    if (this.quickSearchForm.form.userId !== '') {
      actionData.userId = this.quickSearchForm.form.userId
    }
    if (this.quickSearchForm.form.isApplyDeblack !== '') {
      actionData.isApplyDeblack = this.quickSearchForm.form.isApplyDeblack
    }
    if (this.quickSearchForm.form.isDeblack !== '') {
      actionData.isDeblack = this.quickSearchForm.form.isDeblack
    }
    if (this.quickSearchForm.form.ip[0]) {
      if (ipValidate(this.quickSearchForm.form.ip[0])) {
        actionData.ipBegin = this.quickSearchForm.form.ip[0]
      }
    }
    if (this.quickSearchForm.form.ip[1]) {
      if (ipValidate(this.quickSearchForm.form.ip[1])) {
        actionData.ipEnd = this.quickSearchForm.form.ip[1]
      }
    }
    if (this.quickSearchForm.form.c) {
      actionData.blackTimeBegin = this.quickSearchForm.form.c[0]
      actionData.blackTimeEnd = this.quickSearchForm.form.c[1]
    }
    const data: any = await commonAction({ url: '/im-center/action/blacklist/queryVisitorList', method: 'POST', data: actionData })
    if (data.success) {
      this.noticeTableData = data.data.list.map(v => {
        const type = v.blackType === 'visitorId' ? '访客ID' : '访客IP'
        const isApplyDeblack = v.isApplyDeblack ? '是' : '否'
        const isDeblack = v.isDeblack ? '正常' : '封禁'
        const block = v.isDeblack
        const account = this.getAgentName(v.userId)
        return {
          ...v,
          type,
          isApplyDeblack,
          isDeblack,
          account,
          block
        }
      })
      this.pagingData.total = data.data.count
    }
  }

  private handleSearchFunc () {
    this.pagingData.page = 1
    this.getData()
  }

  private tableHeaders: object[] = [
    { label: '客户名称', prop: 'visitorName' },
    { label: '封禁类型', prop: 'type' },
    { label: '拉黑会话', prop: 'sessionId' },
    { label: '操作坐席', prop: 'account' },
    { label: '封禁时间', prop: 'blackTime', sortable: true },
    { label: '拉黑原因', prop: 'blackReason' },
    { label: '封禁次数', prop: 'blackNum', sortable: true },
    { label: '申请解封', prop: 'isApplyDeblack' },
    { label: '当前状态', prop: 'isDeblack' },
    { label: '操作', prop: 'oprate' }
  ]

  private handleEdit (row) {
    this.curDrawer.openDraw(row)
  }

  private rederData (type: string) {
    this.handleSearchFunc()
  }

  private checkHeadersChange (checkList) {
    this.$set(this, 'checkHeaders', checkList)
  }

  private handleSizeChange (size: number) {
    this.pagingData.limit = size
    this.handleSearchFunc()
  }

  private handleCurrentChange (page: number) {
    this.pagingData.page = page
    this.getData()
  }

  private batchs: any = [
    {
      name: '批量解封',
      action: 'open'
    }
  ]

  private batchClick (action: string, selectList: any) {
    let ids = []
    if (selectList === true) {
      ids = []
    } else {
      ids = selectList
    }
    switch (action) {
      case 'open':
        this.$confirm('确定批量解封吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          const params = { url: '/im-center/action/blacklist/untieVisitor', method: 'POST', data: { _ids: ids } }
          const result: any = await commonAction(params)
          if (result.success) {
            this.$message.success('操作成功')
            this.getData()
          }
        })
        break
    }
  }
}
</script>
<style lang="stylus" scoped>
  .oprate-span
    cursor pointer
    color $c-main
    margin 0 4px
  .red-span,.disable-span
    color $c-danger
  .enable-span
    color $c-green
  .disable-span,.enable-span
    font-size 12px
</style>
